<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/index-nav.css">
</head>

<body>
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">博客logo</a>
            </div>

            <div class="collapse navbar-collapse navbar-right" id="example-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">iOS</a></li>
                    <li><a href="#">SVN</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            Java <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">jmeter</a></li>
                            <li><a href="#">EJB</a></li>
                            <li><a href="#">Jasper Report</a></li>
                            <li class="divider"></li>
                            <li><a href="#">分离的链接</a></li>
                            <li class="divider"></li>
                            <li><a href="#">另一个分离的链接</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left navbar-right" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control pull-left" placeholder="Search">
                        <div class="pull-right">
                            <span class="glyphicon glyphicon-search"></span>
                        </div>
                        <!-- 这里有问题，没有调好，span没居中 -->
                    </div>
                </form>
            </div>


        </div>
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-md-3 portrait">
                <div class="user">
                    <img src="./img/吴哀机1.jpg" class="img-responsive img-circle img-thumbnail" alt="Cinque Terre">
                    <div>吴哀机</div>
                    <p>
                        牡丹花没有梅花那样坚强，没有菊花那样楚楚动人，但它依然非常自信，它生长在百花齐放的春天，和其它花儿们争奇斗艳。之所以牡丹是我们的花中皇后，是因为它有勇于挑战的精神，才会成为花中皇后，它有一个信念，无论做什么事情必须要赢，不能输。
                    </p>
                </div>
            </div>
            <div class="col-md-9" id="new">
                <div class="text">
                    <img src="./img/吴牡丹.png" class="img-thumbnail img-responsive col-md-3" alt="Cinque Terre">
                    <div class="panel col-md-9">
                        <div class="panel-heading">
                            <h3 class="tit panel-title">
                                牡丹
                            </h3>
                        </div>
                        <div class="panel-body">
                            <p>何人不爱牡丹花，占断城中好物华。
                                疑是洛川神女作，千娇万态破朝霞。</p>
                            <p>有哪个人不喜欢牡丹花呢，盛开时独占了城中的美景。
                                莫不是洛水女神在那里翩舞吧，千娇万态如同灿烂的朝霞飞腾。</p>
                        </div>
                        <div class="panel-footer">
                            <a href="#">徐凝</a>
                            <a href="#">阅读量:99+</a>
                            <a href="#">2020-04-13</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./jquery-2.1.4/jquery.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script src="./js/mock.js"></script>
    <script src="./js/index.js"></script>
</body>
<script>
    console.log(data)

    $.ajax({
        url: 'http://www.kallen.com/index',
        type: 'get',
        dataType: 'json',
        success: function (data) {
            $.each(data.result, function (index, value) {
                var newText = `
                    <div class="text">
                        <img src="./img/吴牡丹.png" class="img-thumbnail img-responsive col-md-3" alt="Cinque Terre">
                        <div class="panel col-md-9">
                            <div class="panel-heading">
                                <h3 class="tit panel-title">
                                    ${value.title}
                                </h3>
                            </div>
                            <div class="panel-body">
                                <p>${value.text}</p>
                            </div>
                            <div class="panel-footer">
                                <a href="#">${value.name}</a>
                                <a href="#">${value.city}</a>
                                <a href="#">${value.time}</a>
                            </div>
                        </div>
                    </div>
                `
                $("#new").append(newText)
            })
        }
    })
</script>

</html>